<!doctype html>
<!--[if IE 7 ]>		 <html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>		 <html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>		 <html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="api.jquery.com">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>.addClass() | jQuery API Documentation</title>

    <meta name="author" content="JS Foundation - js.foundation">
    <meta name="description" content="">

    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/i/favicon.ico">

    <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=3">
    <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/style.css">

    <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/plugins.js"></script>
    <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/main.js"></script>

    <script src="https://use.typekit.net/wde1aof.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>
    <!-- at the end of the HEAD -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
    <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/docsearch.css">

    <link rel='https://api.w.org/' href='//api.jquery.com/wp-json/' />
    <meta name="generator" content="WordPress 4.5.2" />
    <link rel="alternate" type="application/json+oembed" href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2FaddClass%2F" />
    <link rel="alternate" type="text/xml+oembed" href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2FaddClass%2F&#038;format=xml" />

</head>
<body class="api jquery single single-post postid-9 single-format-standard single-author singular">

<header>
    <section id="global-nav">
        <nav>
            <div class="constrain">
                <ul class="projects">
                    <li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
                    <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
                    <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
                    <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
                    <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
                </ul>
                <ul class="links">
                    <li><a href="https://plugins.jquery.com/">Plugins</a></li>
                    <li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
                        <ul>
                            <li><a href="https://js.foundation/CLA">CLA</a></li>
                            <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
                            <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
                            <li><a href="https://contribute.jquery.org/code/">Code</a></li>
                            <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
                            <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/events">Events</a>
                        <ul class="wide">
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://jquery.org/support/">Support</a>
                        <ul>
                            <li><a href="https://learn.jquery.com/">Learning Center</a></li>
                            <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
                            <li><a href="https://forum.jquery.com/">Forums</a></li>
                            <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
                            <li><a href="https://jquery.org/support/">Commercial Support</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
                        <ul>
                            <li><a href="https://js.foundation/about/join">Join</a></li>
                            <li><a href="https://js.foundation/about/members">Members</a></li>
                            <li><a href="https://js.foundation/about/leadership">Leadership</a></li>
                            <li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
                            <li><a href="https://js.foundation/about/donate">Donate</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
</header>

<div id="container">
    <div id="logo-events" class="constrain clearfix">
        <h2 class="logo"><a href="https://jquery.com/" title="jQuery API Documentation">jQuery API Documentation</a></h2>

        <aside>
            <div id="broadcast">
                <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img src="/jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation" alt="Support the JS Foundation" border="0" width="400" height="100"></a>
            </div>
        </aside>
    </div>

    <nav id="main" class="constrain clearfix">
        <div class="menu-top-container">
            <ul id="menu-top" class="menu">
                <li class="menu-item"><a href="https://jquery.com/download/">Download</a></li>
                <li class="menu-item current"><a href="https://api.jquery.com/">API Documentation</a></li>
                <li class="menu-item"><a href="https://blog.jquery.com/">Blog</a></li>
                <li class="menu-item"><a href="https://plugins.jquery.com/">Plugins</a></li>
                <li class="menu-item"><a href="https://jquery.com/browser-support/">Browser Support</a></li>
            </ul>
        </div>

        <form method="get" class="searchform" action="//api.jquery.com/">
            <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
            <label>
                <span class="visuallyhidden">Search jQuery API Documentation</span>
                <input type="text" name="s" value=""
                       placeholder="Search">
            </label>
        </form>
    </nav>

    <div id="content-wrapper" class="clearfix row">

        <div class="content-right twelve columns">
            <div id="content">

                <article id="post-9" class="post-9 post type-post status-publish format-standard hentry category-attributes category-class-attribute category-css category-65 category-112-and-22 category-75 category-105">
                    <header class="entry-header">
                        <h1 class="entry-title">.addClass()</h1>
                        <hr>
                        <div class="entry-meta">
                            Categories: <span class="category"><a href="//api.jquery.com/category/attributes/">Attributes</a></span><span class="category-divider"> | </span><span class="category"><a href="//api.jquery.com/category/manipulation/">Manipulation</a> &gt; <a href="//api.jquery.com/category/manipulation/class-attribute/">Class Attribute</a></span><span class="category-divider"> | </span><span class="category"><a href="//api.jquery.com/category/css/">CSS</a></span>		</div><!-- .entry-meta -->
                    </header><!-- .entry-header -->

                    <div class="entry-content">
                        <article id="addClass1" class="entry method"><h2 class="section-title">
                            <span class="name">.addClass( className )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
                        </h2>
                            <div class="entry-wrapper">
                                <p class="desc"><strong>Description: </strong>Adds the specified class(es) to each element in the set of matched elements.</p>
                                <ul class="signatures">
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">version added: <a href="/category/version/1.0/">1.0</a></span><a id="addClass-className" href="#addClass-className"><span class="icon-link"></span>.addClass( className )</a>
                                        </h4>
                                        <ul><li id="addClass-className-className">
                                            <div><strong>className</strong></div>
                                            <div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
                                            </div>
                                            <div>One or more space-separated classes to be added to the class attribute of each matched element.</div>
                                        </li></ul>
                                    </li>
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">version added: <a href="/category/version/3.3/">3.3</a></span><a id="addClass-classNames" href="#addClass-classNames"><span class="icon-link"></span>.addClass( classNames )</a>
                                        </h4>
                                        <ul><li id="addClass-classNames-classNames">
                                            <div><strong>classNames</strong></div>
                                            <div>Type: <a href="http://api.jquery.com/Types/#Array">Array</a>
                                            </div>
                                            <div>An array of classes to be added to the class attribute of each matched element.</div>
                                        </li></ul>
                                    </li>
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">version added: <a href="/category/version/1.4/">1.4</a></span><a id="addClass-function" href="#addClass-function"><span class="icon-link"></span>.addClass( function )</a>
                                        </h4>
                                        <ul><li id="addClass-function-function">
                                            <div><strong>function</strong></div>
                                            <div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Integer">Integer</a> index, <a href="http://api.jquery.com/Types/#String">String</a> currentClassName )
                                                =&gt;
                                                <a href="http://api.jquery.com/Types/#String">String</a>
                                            </div>
                                            <div>A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, <code>this</code> refers to the current element in the set.</div>
                                        </li></ul>
                                    </li>
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">version added: <a href="/category/version/3.3/">3.3</a></span><a id="addClass-function" href="#addClass-function"><span class="icon-link"></span>.addClass( function )</a>
                                        </h4>
                                        <ul><li id="addClass-function-function">
                                            <div><strong>function</strong></div>
                                            <div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Integer">Integer</a> index, <a href="http://api.jquery.com/Types/#String">String</a> currentClassName )
                                                =&gt;
                                                <a href="http://api.jquery.com/Types/#String">String</a><span> | </span><a href="http://api.jquery.com/Types/#Array">Array</a>
                                            </div>
                                            <div>A function returning one or more space-separated class names or an array of class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, <code>this</code> refers to the current element in the set.</div>
                                        </li></ul>
                                    </li>
                                </ul>
                                <div class="longdesc" id="entry-longdesc">
                                    <p>It&apos;s important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.</p>
                                    <p>Before jQuery version 1.12/2.2, the <code>.addClass()</code> method manipulated the <code>className</code> <em>property</em> of the selected elements, not the <code>class</code> <em>attribute</em>. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).</p>
                                    <p>As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the <code>class</code> <em>attribute</em> is used instead. So, <code>.addClass()</code> can be used on XML or SVG documents.</p>
                                    <p>More than one class may be added at a time, separated by a space, to the set of matched elements, like so:</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>

                                                <td class="gutter">

                                                    <div class="line n1">1</div>

                                                </td>

                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).addClass( <span class="hljs-string">&quot;myClass yourClass&quot;</span> );</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <p>This method is often used with <code>.removeClass()</code> to switch elements&apos; classes from one to another, like so:</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>

                                                <td class="gutter">

                                                    <div class="line n1">1</div>

                                                </td>

                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).removeClass( <span class="hljs-string">&quot;myClass noClass&quot;</span> ).addClass( <span class="hljs-string">&quot;yourClass&quot;</span> );</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
                                    <p>As of jQuery 1.4, the <code>.addClass()</code> method&apos;s argument can receive a function.</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>

                                                <td class="gutter">

                                                    <div class="line n1">1</div>

                                                    <div class="line n2">2</div>

                                                    <div class="line n3">3</div>

                                                </td>

                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;ul li&quot;</span> ).addClass(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> index </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;item-&quot;</span> + index;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <p>Given an unordered list with two <code>&lt;li&gt;</code> elements, this example adds the class &quot;item-0&quot; to the first <code>&lt;li&gt;</code> and &quot;item-1&quot; to the second.</p>
                                </div>
                                <section class="entry-examples" id="entry-examples"><header><h2>Examples:</h2></header><div class="entry-example" id="example-0">
                                    <p>Add the class &quot;selected&quot; to the matched elements.</p>
                                    <div class="syntaxhighlighter xml">
                                        <table>
                                            <tbody>
                                            <tr>

                                                <td class="gutter">

                                                    <div class="line n1">1</div>

                                                    <div class="line n2">2</div>

                                                    <div class="line n3">3</div>

                                                    <div class="line n4">4</div>

                                                    <div class="line n5">5</div>

                                                    <div class="line n6">6</div>

                                                    <div class="line n7">7</div>

                                                    <div class="line n8">8</div>

                                                    <div class="line n9">9</div>

                                                    <div class="line n10">10</div>

                                                    <div class="line n11">11</div>

                                                    <div class="line n12">12</div>

                                                    <div class="line n13">13</div>

                                                    <div class="line n14">14</div>

                                                    <div class="line n15">15</div>

                                                    <div class="line n16">16</div>

                                                    <div class="line n17">17</div>

                                                    <div class="line n18">18</div>

                                                    <div class="line n19">19</div>

                                                    <div class="line n20">20</div>

                                                    <div class="line n21">21</div>

                                                    <div class="line n22">22</div>

                                                    <div class="line n23">23</div>

                                                    <div class="line n24">24</div>

                                                    <div class="line n25">25</div>

                                                    <div class="line n26">26</div>

                                                    <div class="line n27">27</div>

                                                    <div class="line n28">28</div>

                                                    <div class="line n29">29</div>

                                                    <div class="line n30">30</div>

                                                    <div class="line n31">31</div>

                                                </td>

                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>addClass demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">8px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-class">.selected</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: blue;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-class">.highlight</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: yellow;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>and<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Goodbye<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).last().addClass( <span class="hljs-string">&quot;selected&quot;</span> );</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <h4>Demo:</h4>
                                    <div class="demo code-demo"></div>
                                </div>
                                    <div class="entry-example" id="example-1">
                                        <p>Add the classes &quot;selected&quot; and &quot;highlight&quot; to the matched elements.</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>

                                                    <td class="gutter">

                                                        <div class="line n1">1</div>

                                                        <div class="line n2">2</div>

                                                        <div class="line n3">3</div>

                                                        <div class="line n4">4</div>

                                                        <div class="line n5">5</div>

                                                        <div class="line n6">6</div>

                                                        <div class="line n7">7</div>

                                                        <div class="line n8">8</div>

                                                        <div class="line n9">9</div>

                                                        <div class="line n10">10</div>

                                                        <div class="line n11">11</div>

                                                        <div class="line n12">12</div>

                                                        <div class="line n13">13</div>

                                                        <div class="line n14">14</div>

                                                        <div class="line n15">15</div>

                                                        <div class="line n16">16</div>

                                                        <div class="line n17">17</div>

                                                        <div class="line n18">18</div>

                                                        <div class="line n19">19</div>

                                                        <div class="line n20">20</div>

                                                        <div class="line n21">21</div>

                                                        <div class="line n22">22</div>

                                                        <div class="line n23">23</div>

                                                        <div class="line n24">24</div>

                                                        <div class="line n25">25</div>

                                                        <div class="line n26">26</div>

                                                        <div class="line n27">27</div>

                                                        <div class="line n28">28</div>

                                                        <div class="line n29">29</div>

                                                        <div class="line n30">30</div>

                                                        <div class="line n31">31</div>

                                                    </td>

                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>addClass demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">8px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-class">.selected</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: red;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-class">.highlight</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: yellow;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>and<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Goodbye<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).last().addClass( <span class="hljs-string">&quot;selected highlight&quot;</span> );</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                        <h4>Demo:</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-2">
                                        <p>Add the classes &quot;selected&quot; and &quot;highlight&quot; to the matched elements (3.3+ syntax).</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>

                                                    <td class="gutter">

                                                        <div class="line n1">1</div>

                                                        <div class="line n2">2</div>

                                                        <div class="line n3">3</div>

                                                        <div class="line n4">4</div>

                                                        <div class="line n5">5</div>

                                                        <div class="line n6">6</div>

                                                        <div class="line n7">7</div>

                                                        <div class="line n8">8</div>

                                                        <div class="line n9">9</div>

                                                        <div class="line n10">10</div>

                                                        <div class="line n11">11</div>

                                                        <div class="line n12">12</div>

                                                        <div class="line n13">13</div>

                                                        <div class="line n14">14</div>

                                                        <div class="line n15">15</div>

                                                        <div class="line n16">16</div>

                                                        <div class="line n17">17</div>

                                                        <div class="line n18">18</div>

                                                        <div class="line n19">19</div>

                                                        <div class="line n20">20</div>

                                                        <div class="line n21">21</div>

                                                        <div class="line n22">22</div>

                                                        <div class="line n23">23</div>

                                                        <div class="line n24">24</div>

                                                        <div class="line n25">25</div>

                                                        <div class="line n26">26</div>

                                                        <div class="line n27">27</div>

                                                        <div class="line n28">28</div>

                                                        <div class="line n29">29</div>

                                                        <div class="line n30">30</div>

                                                        <div class="line n31">31</div>

                                                    </td>

                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>addClass demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">p</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">8px</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-class">.selected</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">color</span>: red;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-class">.highlight</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: yellow;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Hello<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>and<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Goodbye<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;p&quot;</span> ).last().addClass( [ <span class="hljs-string">&quot;selected&quot;</span>, <span class="hljs-string">&quot;highlight&quot;</span> ] );</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                        <h4>Demo:</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-3">
                                        <p>Pass in a function to <code>.addClass()</code> to add the &quot;green&quot; class to a div that already has a &quot;red&quot; class.</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>

                                                    <td class="gutter">

                                                        <div class="line n1">1</div>

                                                        <div class="line n2">2</div>

                                                        <div class="line n3">3</div>

                                                        <div class="line n4">4</div>

                                                        <div class="line n5">5</div>

                                                        <div class="line n6">6</div>

                                                        <div class="line n7">7</div>

                                                        <div class="line n8">8</div>

                                                        <div class="line n9">9</div>

                                                        <div class="line n10">10</div>

                                                        <div class="line n11">11</div>

                                                        <div class="line n12">12</div>

                                                        <div class="line n13">13</div>

                                                        <div class="line n14">14</div>

                                                        <div class="line n15">15</div>

                                                        <div class="line n16">16</div>

                                                        <div class="line n17">17</div>

                                                        <div class="line n18">18</div>

                                                        <div class="line n19">19</div>

                                                        <div class="line n20">20</div>

                                                        <div class="line n21">21</div>

                                                        <div class="line n22">22</div>

                                                        <div class="line n23">23</div>

                                                        <div class="line n24">24</div>

                                                        <div class="line n25">25</div>

                                                        <div class="line n26">26</div>

                                                        <div class="line n27">27</div>

                                                        <div class="line n28">28</div>

                                                        <div class="line n29">29</div>

                                                        <div class="line n30">30</div>

                                                        <div class="line n31">31</div>

                                                        <div class="line n32">32</div>

                                                        <div class="line n33">33</div>

                                                        <div class="line n34">34</div>

                                                        <div class="line n35">35</div>

                                                        <div class="line n36">36</div>

                                                        <div class="line n37">37</div>

                                                        <div class="line n38">38</div>

                                                        <div class="line n39">39</div>

                                                        <div class="line n40">40</div>

                                                        <div class="line n41">41</div>

                                                    </td>

                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>addClass demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-tag">div</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: white;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-class">.red</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: red;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-selector-class">.red</span><span class="hljs-selector-class">.green</span> {</code></div></div><div class="container"><div class="line"><code>    <span class="hljs-attribute">background</span>: green;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>This div should be white<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;red&quot;</span>&gt;</span>This div will be green because it now has the &quot;green&quot; and &quot;red&quot; classes.</code></div></div><div class="container"><div class="line"><code>   It would be red if the addClass function failed.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>This div should be white<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>There are zero green divs<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;div&quot;</span> ).addClass(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> index, currentClass </span>) </span>{</code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">var</span> addedClass;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">if</span> ( currentClass === <span class="hljs-string">&quot;red&quot;</span> ) {</code></div></div><div class="container"><div class="line"><code>    addedClass = <span class="hljs-string">&quot;green&quot;</span>;</code></div></div><div class="container"><div class="line"><code>    $( <span class="hljs-string">&quot;p&quot;</span> ).text( <span class="hljs-string">&quot;There is one green div&quot;</span> );</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="hljs-keyword">return</span> addedClass;</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                        <h4>Demo:</h4>
                                        <div class="demo code-demo"></div>
                                    </div></section>
                            </div></article>	</div><!-- .entry-content -->

                </article><!-- #post-9 -->
            </div>

            <div id="sidebar" class="widget-area" role="complementary">
                <aside id="categories" class="widget">
                    <ul>
                        <li class="cat-item cat-item-1"><a href="//api.jquery.com/category/ajax/" >Ajax</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-2"><a href="//api.jquery.com/category/ajax/global-ajax-event-handlers/" >Global Ajax Event Handlers</a>
                                </li>
                                <li class="cat-item cat-item-3"><a href="//api.jquery.com/category/ajax/helper-functions/" >Helper Functions</a>
                                </li>
                                <li class="cat-item cat-item-4"><a href="//api.jquery.com/category/ajax/low-level-interface/" >Low-Level Interface</a>
                                </li>
                                <li class="cat-item cat-item-5"><a href="//api.jquery.com/category/ajax/shorthand-methods/" >Shorthand Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-6 current-cat"><a href="//api.jquery.com/category/attributes/" >Attributes</a>
                        </li>
                        <li class="cat-item cat-item-7"><a href="//api.jquery.com/category/callbacks-object/" >Callbacks Object</a>
                        </li>
                        <li class="cat-item cat-item-8"><a href="//api.jquery.com/category/core/" >Core</a>
                        </li>
                        <li class="cat-item cat-item-9"><a href="//api.jquery.com/category/css/" >CSS</a>
                        </li>
                        <li class="cat-item cat-item-10"><a href="//api.jquery.com/category/data/" >Data</a>
                        </li>
                        <li class="cat-item cat-item-11"><a href="//api.jquery.com/category/deferred-object/" >Deferred Object</a>
                        </li>
                        <li class="cat-item cat-item-87"><a href="//api.jquery.com/category/deprecated/" >Deprecated</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-90"><a href="//api.jquery.com/category/deprecated/deprecated-1.3/" >Deprecated 1.3</a>
                                </li>
                                <li class="cat-item cat-item-88"><a href="//api.jquery.com/category/deprecated/deprecated-1.7/" >Deprecated 1.7</a>
                                </li>
                                <li class="cat-item cat-item-89"><a href="//api.jquery.com/category/deprecated/deprecated-1.8/" >Deprecated 1.8</a>
                                </li>
                                <li class="cat-item cat-item-94"><a href="//api.jquery.com/category/deprecated/deprecated-1.9/" >Deprecated 1.9</a>
                                </li>
                                <li class="cat-item cat-item-93"><a href="//api.jquery.com/category/deprecated/deprecated-1.10/" >Deprecated 1.10</a>
                                </li>
                                <li class="cat-item cat-item-98"><a href="//api.jquery.com/category/deprecated/deprecated-3.0/" >Deprecated 3.0</a>
                                </li>
                                <li class="cat-item cat-item-101"><a href="//api.jquery.com/category/deprecated/deprecated-3.2/" >Deprecated 3.2</a>
                                </li>
                                <li class="cat-item cat-item-99"><a href="//api.jquery.com/category/deprecated/deprecated-3.3/" >Deprecated 3.3</a>
                                </li>
                                <li class="cat-item cat-item-100"><a href="//api.jquery.com/category/deprecated/deprecated-3.4/" >Deprecated 3.4</a>
                                </li>
                                <li class="cat-item cat-item-102"><a href="//api.jquery.com/category/deprecated/deprecated-3.5/" >Deprecated 3.5</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-12"><a href="//api.jquery.com/category/dimensions/" >Dimensions</a>
                        </li>
                        <li class="cat-item cat-item-13"><a href="//api.jquery.com/category/effects/" >Effects</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-14"><a href="//api.jquery.com/category/effects/basics/" >Basics</a>
                                </li>
                                <li class="cat-item cat-item-15"><a href="//api.jquery.com/category/effects/custom-effects/" >Custom</a>
                                </li>
                                <li class="cat-item cat-item-16"><a href="//api.jquery.com/category/effects/fading/" >Fading</a>
                                </li>
                                <li class="cat-item cat-item-17"><a href="//api.jquery.com/category/effects/sliding/" >Sliding</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-18"><a href="//api.jquery.com/category/events/" >Events</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-19"><a href="//api.jquery.com/category/events/browser-events/" >Browser Events</a>
                                </li>
                                <li class="cat-item cat-item-20"><a href="//api.jquery.com/category/events/document-loading/" >Document Loading</a>
                                </li>
                                <li class="cat-item cat-item-21"><a href="//api.jquery.com/category/events/event-handler-attachment/" >Event Handler Attachment</a>
                                </li>
                                <li class="cat-item cat-item-22"><a href="//api.jquery.com/category/events/event-object/" >Event Object</a>
                                </li>
                                <li class="cat-item cat-item-23"><a href="//api.jquery.com/category/events/form-events/" >Form Events</a>
                                </li>
                                <li class="cat-item cat-item-24"><a href="//api.jquery.com/category/events/keyboard-events/" >Keyboard Events</a>
                                </li>
                                <li class="cat-item cat-item-25"><a href="//api.jquery.com/category/events/mouse-events/" >Mouse Events</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-26"><a href="//api.jquery.com/category/forms/" >Forms</a>
                        </li>
                        <li class="cat-item cat-item-27"><a href="//api.jquery.com/category/internals/" >Internals</a>
                        </li>
                        <li class="cat-item cat-item-28"><a href="//api.jquery.com/category/manipulation/" >Manipulation</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-29"><a href="//api.jquery.com/category/manipulation/class-attribute/" >Class Attribute</a>
                                </li>
                                <li class="cat-item cat-item-30"><a href="//api.jquery.com/category/manipulation/copying/" >Copying</a>
                                </li>
                                <li class="cat-item cat-item-32"><a href="//api.jquery.com/category/manipulation/dom-insertion-around/" >DOM Insertion, Around</a>
                                </li>
                                <li class="cat-item cat-item-33"><a href="//api.jquery.com/category/manipulation/dom-insertion-inside/" >DOM Insertion, Inside</a>
                                </li>
                                <li class="cat-item cat-item-34"><a href="//api.jquery.com/category/manipulation/dom-insertion-outside/" >DOM Insertion, Outside</a>
                                </li>
                                <li class="cat-item cat-item-35"><a href="//api.jquery.com/category/manipulation/dom-removal/" >DOM Removal</a>
                                </li>
                                <li class="cat-item cat-item-36"><a href="//api.jquery.com/category/manipulation/dom-replacement/" >DOM Replacement</a>
                                </li>
                                <li class="cat-item cat-item-37"><a href="//api.jquery.com/category/manipulation/general-attributes/" >General Attributes</a>
                                </li>
                                <li class="cat-item cat-item-38"><a href="//api.jquery.com/category/manipulation/style-properties/" >Style Properties</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-39"><a href="//api.jquery.com/category/miscellaneous/" >Miscellaneous</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-40"><a href="//api.jquery.com/category/miscellaneous/collection-manipulation/" >Collection Manipulation</a>
                                </li>
                                <li class="cat-item cat-item-41"><a href="//api.jquery.com/category/miscellaneous/data-storage/" >Data Storage</a>
                                </li>
                                <li class="cat-item cat-item-42"><a href="//api.jquery.com/category/miscellaneous/dom-element-methods/" >DOM Element Methods</a>
                                </li>
                                <li class="cat-item cat-item-43"><a href="//api.jquery.com/category/miscellaneous/setup-methods/" >Setup Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-44"><a href="//api.jquery.com/category/offset/" >Offset</a>
                        </li>
                        <li class="cat-item cat-item-45"><a href="//api.jquery.com/category/properties/" >Properties</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-46"><a href="//api.jquery.com/category/properties/jquery-object-instance-properties/" >Properties of jQuery Object Instances</a>
                                </li>
                                <li class="cat-item cat-item-47"><a href="//api.jquery.com/category/properties/global-jquery-object-properties/" >Properties of the Global jQuery Object</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-92"><a href="//api.jquery.com/category/removed/" >Removed</a>
                        </li>
                        <li class="cat-item cat-item-48"><a href="//api.jquery.com/category/selectors/" >Selectors</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-49"><a href="//api.jquery.com/category/selectors/attribute-selectors/" >Attribute</a>
                                </li>
                                <li class="cat-item cat-item-50"><a href="//api.jquery.com/category/selectors/basic-css-selectors/" >Basic</a>
                                </li>
                                <li class="cat-item cat-item-51"><a href="//api.jquery.com/category/selectors/basic-filter-selectors/" >Basic Filter</a>
                                </li>
                                <li class="cat-item cat-item-52"><a href="//api.jquery.com/category/selectors/child-filter-selectors/" >Child Filter</a>
                                </li>
                                <li class="cat-item cat-item-53"><a href="//api.jquery.com/category/selectors/content-filter-selector/" >Content Filter</a>
                                </li>
                                <li class="cat-item cat-item-54"><a href="//api.jquery.com/category/selectors/form-selectors/" >Form</a>
                                </li>
                                <li class="cat-item cat-item-55"><a href="//api.jquery.com/category/selectors/hierarchy-selectors/" >Hierarchy</a>
                                </li>
                                <li class="cat-item cat-item-56"><a href="//api.jquery.com/category/selectors/jquery-selector-extensions/" >jQuery Extensions</a>
                                </li>
                                <li class="cat-item cat-item-57"><a href="//api.jquery.com/category/selectors/visibility-filter-selectors/" >Visibility Filter</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-58"><a href="//api.jquery.com/category/traversing/" >Traversing</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-59"><a href="//api.jquery.com/category/traversing/filtering/" >Filtering</a>
                                </li>
                                <li class="cat-item cat-item-60"><a href="//api.jquery.com/category/traversing/miscellaneous-traversal/" >Miscellaneous Traversing</a>
                                </li>
                                <li class="cat-item cat-item-61"><a href="//api.jquery.com/category/traversing/tree-traversal/" >Tree Traversal</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-63"><a href="//api.jquery.com/category/utilities/" >Utilities</a>
                        </li>
                        <li class="cat-item cat-item-64"><a href="//api.jquery.com/category/version/" >Version</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-65"><a href="//api.jquery.com/category/version/1.0/" >Version 1.0</a>
                                </li>
                                <li class="cat-item cat-item-66"><a href="//api.jquery.com/category/version/1.0.4/" >Version 1.0.4</a>
                                </li>
                                <li class="cat-item cat-item-67"><a href="//api.jquery.com/category/version/1.1/" >Version 1.1</a>
                                </li>
                                <li class="cat-item cat-item-68"><a href="//api.jquery.com/category/version/1.1.2/" >Version 1.1.2</a>
                                </li>
                                <li class="cat-item cat-item-69"><a href="//api.jquery.com/category/version/1.1.3/" >Version 1.1.3</a>
                                </li>
                                <li class="cat-item cat-item-70"><a href="//api.jquery.com/category/version/1.1.4/" >Version 1.1.4</a>
                                </li>
                                <li class="cat-item cat-item-71"><a href="//api.jquery.com/category/version/1.2/" >Version 1.2</a>
                                </li>
                                <li class="cat-item cat-item-72"><a href="//api.jquery.com/category/version/1.2.3/" >Version 1.2.3</a>
                                </li>
                                <li class="cat-item cat-item-73"><a href="//api.jquery.com/category/version/1.2.6/" >Version 1.2.6</a>
                                </li>
                                <li class="cat-item cat-item-74"><a href="//api.jquery.com/category/version/1.3/" >Version 1.3</a>
                                </li>
                                <li class="cat-item cat-item-75"><a href="//api.jquery.com/category/version/1.4/" >Version 1.4</a>
                                </li>
                                <li class="cat-item cat-item-76"><a href="//api.jquery.com/category/version/1.4.1/" >Version 1.4.1</a>
                                </li>
                                <li class="cat-item cat-item-77"><a href="//api.jquery.com/category/version/1.4.2/" >Version 1.4.2</a>
                                </li>
                                <li class="cat-item cat-item-78"><a href="//api.jquery.com/category/version/1.4.3/" >Version 1.4.3</a>
                                </li>
                                <li class="cat-item cat-item-79"><a href="//api.jquery.com/category/version/1.4.4/" >Version 1.4.4</a>
                                </li>
                                <li class="cat-item cat-item-80"><a href="//api.jquery.com/category/version/1.5/" >Version 1.5</a>
                                </li>
                                <li class="cat-item cat-item-81"><a href="//api.jquery.com/category/version/1.5.1/" >Version 1.5.1</a>
                                </li>
                                <li class="cat-item cat-item-82"><a href="//api.jquery.com/category/version/1.6/" >Version 1.6</a>
                                </li>
                                <li class="cat-item cat-item-83"><a href="//api.jquery.com/category/version/1.7/" >Version 1.7</a>
                                </li>
                                <li class="cat-item cat-item-84"><a href="//api.jquery.com/category/version/1.8/" >Version 1.8</a>
                                </li>
                                <li class="cat-item cat-item-86"><a href="//api.jquery.com/category/version/1.9/" >Version 1.9</a>
                                </li>
                                <li class="cat-item cat-item-103"><a href="//api.jquery.com/category/version/1.12-and-2.2/" >Version 1.12 &amp; 2.2</a>
                                </li>
                                <li class="cat-item cat-item-95"><a href="//api.jquery.com/category/version/3.0/" >Version 3.0</a>
                                </li>
                                <li class="cat-item cat-item-96"><a href="//api.jquery.com/category/version/3.1/" >Version 3.1</a>
                                </li>
                                <li class="cat-item cat-item-104"><a href="//api.jquery.com/category/version/3.2/" >Version 3.2</a>
                                </li>
                                <li class="cat-item cat-item-105"><a href="//api.jquery.com/category/version/3.3/" >Version 3.3</a>
                                </li>
                                <li class="cat-item cat-item-106"><a href="//api.jquery.com/category/version/3.4/" >Version 3.4</a>
                                </li>
                                <li class="cat-item cat-item-107"><a href="//api.jquery.com/category/version/3.5/" >Version 3.5</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>
    </div>
</div>

<footer class="clearfix simple">
    <div class="constrain">
        <div class="row">
            <div class="six columns offset-by-three">
                <h3><span>Books</span></h3>
                <ul class="books">
                    <li>
                        <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
                            <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92" height="114">
                            Learning jQuery Fourth Edition
                            <cite>Karl Swedberg and Jonathan Chaffer</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.manning.com/books/jquery-in-action-third-edition">
                            <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="92" height="114">
                            jQuery in Action
                            <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.syncfusion.com/ebooks/jquery">
                            <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" alt="jQuery Succinctly by Cody Lindley" width="92" height="114">
                            jQuery Succinctly
                            <cite>Cody Lindley</cite>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div id="legal">
            <ul class="footer-site-links">
                <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
                <li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
                <li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
                <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
                <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
                <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
            </ul>
            <p class="copyright">
                Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
                <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
            </p>
        </div>

    </div>
</footer>

<script type='text/javascript' src='//api.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='//api.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"  onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
